<template>
  <div>
    <el-drawer :close-on-click-modal="false" destroy-on-close class="hm-drawer" size="70%" direction="rtl"
      v-model="show" :before-close="handleClose">
      <template #header>
        <div class="hm-box-title">样品管理详情</div>
      </template>
      <div class="content">
        <div class="content_nav" v-if="!editFlag">
          <div v-for="(item, index) in navList" :key="index" :class="navIndex !== index ? 'nav_class' : 'nav_hover'"
            @click="navClick(index)">
            {{ item.name }}
          </div>
        </div>
        <div class="content_nav" v-else>
          <div v-for="(item, index) in navLists" :key="index" :class="navIndex !== index ? 'nav_class' : 'nav_hover'"
            @click="navClick(index)">
            {{ item.name }}
          </div>
        </div>
        <div class="content_div" @scroll="handleScroll">
          <!-- 新增 -->
          <div v-if="!editFlag">
            <div class="info">
              <div class="hm-form-item-box1">
                <div class="hm-form-title">基本信息</div>
              </div>
              <el-row class="hm-row3" :gutter="60">
                <div style="margin-left: 30px">
                  <image-preview :src="commoditydetailsData.productImage" :width="318" :height="260" />
                </div>
                <el-col :span="14">
                  <div class="div_flex">
                    <div class="div_flex_items">
                      <div class="label">商品名称：</div>
                      <div class="value">{{ commoditydetailsData.styleName }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">库存编码：</div>
                      <div class="value">{{ commoditydetailsData.stockCode }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">商品编码：</div>
                      <div class="value">{{ commoditydetailsData.id }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">品牌：</div>
                      <div class="value">{{ commoditydetailsData.brandName }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">贸易方式：</div>
                      <div class="value">{{ commoditydetailsData.tradeMode }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">类目：</div>
                      <div class="value">{{ commoditydetailsData.productCategoryName }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">货架号：</div>
                      <div class="value">{{ commoditydetailsData?.stockInfo?.locationName }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">对接群名：</div>
                      <div class="value">{{ commoditydetailsData.groupName || '-' }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">规格/材质：</div>
                      <div class="value">{{ commoditydetailsData.specs || '-' }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">选品部门：</div>
                      <div class="value">{{ commoditydetailsData.coreName }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">能否破价：</div>
                      <div class="value">{{ commoditydetailsData.discountPrice }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">历史最低售价：</div>
                      <div class="value">{{ commoditydetailsData.historyPrice }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">过期提醒时间:</div>
                      <div class="value">{{ commoditydetailsData.overdueTime }}</div>
                    </div>
                    <div class="div_flex_items">
                      <div class="label">招商入库数量：</div>
                      <div class="value">{{ commoditydetailsData.inStockNum }}</div>
                    </div>
                    <div class="div_flex_item">
                      <div class="label">69码：</div>
                      <div class="value">{{ commoditydetailsData.styleCode }}</div>
                    </div>

                    <div class="div_flex_item">
                      <div class="label">卖点：</div>
                      <div class="value">{{ commoditydetailsData.sellingPoints }}</div>
                    </div>

                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="liveShot">
              <div class="liveShot_text">产品实拍：</div>
              <div class="liveShot_img">
                <div class="liveShot_img_item" v-for="(item, index) in commoditydetailsData.stockImageArr">
                  <el-image class="img" :src="item" fit="cover" :preview-src-list="commoditydetailsData.stockImageArr"
                    :initial-index="index" />
                </div>
              </div>
            </div>
            <div class="liveShot">
              <div class="liveShot_text">备注：</div>
              <div class="liveShot_context">{{ commoditydetailsData.inAuditRemark }}</div>
            </div>
            <div class="liveShot">
              <div class="liveShot_text">售卖主播：</div>
              <div class="liveShot_context">{{ commoditydetailsData.sellCore }}</div>
            </div>
            <div class="supplementaryInfo">
              <div>
                <div class="hm-form-title">直播补充信息</div>
              </div>
              <el-row>
                <el-col :span="24">
                  <div class="hm-form-mechanism">
                    <div class="mechanism_flex">
                      <div class="mechanism_div">
                        <div class="title">发货时间：</div>{{
                          commoditydetailsData.deliveryTime
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">发货地：</div>{{
                          commoditydetailsData.placeDeliverys
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">物流/快递：</div>{{
                          commoditydetailsData.logistics
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">适用人群：</div>{{
                          commoditydetailsData.eligibility
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">厂家可用库存：</div>{{
                          commoditydetailsData.factoryStockNum
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">不发货地区：</div>
                        <div class="value">{{
                          commoditydetailsData.noSendArea
                        }}</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="cooperationMode">
              <div>
                <div class="hm-form-title">合作信息</div>
              </div>
              <el-row class="content_div_cooperationMode">
                <el-col :span="24">
                  <div class="hm-form-mechanism">
                    <div class="mechanism_flex">
                      <div class="mechanism_div">
                        <div class="title">招商部：</div>{{ commoditydetailsData.recruiterDeptName
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">招商员：</div>{{ commoditydetailsData.recruiterUserName
                        }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">是否走仓：</div>{{ commoditydetailsData.warehouse == 0 ?
                          '否'
                          : '是' }}
                      </div>
                    </div>
                  </div>
                  <div class="hm-form-mechanism" v-for="(item, index) in commoditydetailsData.mechanismList"
                    :key="index">
                    <div class="mechanism_title" v-if="item.cooperationMode">{{ '机制' + (index + 1)
                      }}：</div>
                    <div class="mechanism_flex" v-if="item.cooperationMode">
                      <div class="mechanism_div">
                        <div class="title">合作方式：</div>{{ item.cooperationMode }}
                      </div>
                      <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                        <div class="title">售价：</div>{{ item.price }}
                      </div>
                      <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                        <div class="title">佣金：</div>{{ item.commission ? item.commission + '%' :
                          '-' }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">直播机制：</div>{{ item.liveStreamingMechanism || '-' }}
                      </div>
                      <div class="mechanism_div">
                        <div class="title">成本价：</div>{{ item.costPrice || '-' }}
                      </div>
                      <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                        <div class="title">补充佣金：</div>{{ item.brokerage ? item.brokerage + '%' :
                          '-' }}
                      </div>
                    </div>
                  </div>

                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 编辑 -->
          <div v-if="editFlag">
            <el-form ref="queryRef" :rules="rules" label-width="100px" :model="queryParams" @submit.native.prevent scroll-to-error>
              <div class="info">
                <div class="hm-form-item-box1">
                  <div class="hm-form-title">基本信息</div>
                </div>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="商品名称" prop="styleName">
                      <el-input v-model="queryParams.styleName" placeholder="请输入商品名称" clearable disabled
                        maxlength="50" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="贸易方式" prop="tradeMode">
                      <el-select v-model="queryParams.tradeMode" placeholder="请选择贸易方式" clearable disabled>
                        <el-option v-for="dict in hm_trade_type" :key="dict.value" :label="dict.label"
                          :value="dict.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="类目" prop="categoryId">
                      <el-cascader v-model="queryParams.categoryId" :options="categoryProps"
                        :props="{ label: 'categoryName', value: 'categoryId' }" clearable ref="categoryRef"
                        @expand-change="handleChange" placeholder="请选择类目" style="width: 100%;" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>

                  <!-- <el-col :span="8">
                                        <el-form-item label="材质" prop="ingredient">
                                            <el-input v-model="queryParams.ingredient" placeholder="请输入材质" clearable
                                                disabled  maxlength="20" />
                                        </el-form-item>
                                    </el-col> -->
                  <el-col :span="8">
                    <el-form-item label="69码" prop="styleCode">
                      <el-input v-model="queryParams.styleCode" placeholder="请输入69码" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="对接群名" prop="groupName">
                      <el-input v-model="queryParams.groupName" placeholder="请输入对接群名" clearable maxlength="20" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存编码" prop="stockCode">
                      <el-input v-model="queryParams.stockCode" placeholder="请输入库存编码" clearable maxlength="25" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="规格/材质" prop="specs">
                      <el-input v-model="queryParams.specs" placeholder="请输入规格/材质" clearable disabled maxlength="200"
                        type="textarea" autosize show-word-limit class="ability_info" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="卖点" prop="sellingPoints">
                      <el-input v-model="queryParams.sellingPoints" placeholder="请输入卖点" clearable disabled
                        maxlength="189" type="textarea" autosize show-word-limit class="ability_info" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注" prop="inAuditRemark">
                      <el-input v-model="queryParams.inAuditRemark" placeholder="请输入备注" clearable maxlength="200"
                        type="textarea" autosize show-word-limit class="ability_info" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="16">
                    <el-form-item label="售卖主播" prop="sellCore">
                      <el-input v-model="queryParams.sellCore" placeholder="请输入售卖主播" clearable maxlength="200"
                        type="textarea" autosize show-word-limit class="ability_info" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row>
                                    
                                    <el-col :span="8">
                                        <el-form-item label="商品编码" prop="styleCode">
                                            <el-input v-model="queryParams.styleCode" placeholder="请输入商品编码" clearable
                                                style="width: 220px" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="品牌" prop="brandName">
                                            <el-input v-model="queryParams.brandName" placeholder="请输入品牌" clearable
                                                style="width: 220px" maxlength="50" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="货架号" prop="huojiahao">
                                            <el-input v-model="queryParams.huojiahao" placeholder="请输入货架号" clearable
                                                style="width: 220px" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="对接群名" prop="groupName">
                                            <el-input v-model="queryParams.groupName" placeholder="请输入对接群名" clearable
                                                style="width: 220px" maxlength="20" />
                                        </el-form-item>
                                    </el-col>
                                </el-row> -->

                <div class="liveShot">
                  <div class="liveShot_text">商品图片：</div>
                  <div class="liveShot_img">
                    <ImageUploadDrags v-model="queryParams.productImage" :limit="5" :format="true" />
                  </div>
                </div>
                <div class="liveShot">
                  <div class="liveShot_text">产品实拍：</div>
                  <div class="liveShot_img">
                    <ImageUploadDrags v-model="queryParams.stockImage" :limit="5" :format="true" />
                  </div>
                </div>
              </div>
              <div class="supplementaryInfo">
                <div>
                  <div class="hm-form-title">直播补充信息</div>
                </div>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="发货时间" prop="deliveryTime">
                      <el-input v-model="queryParams.deliveryTime" placeholder="请输入发货时间" clearable disabled
                        style="width: 220px" maxlength="20" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发货地" prop="placeDelivery">
                      <el-cascader v-model="queryParams.placeDelivery" :options="options" disabled :props="addressProps"
                        style="width: 220px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="物流/快递" prop="logistics">
                      <el-select v-model="queryParams.logistics" placeholder="请选择物流/快递" clearable disabled
                        style="width: 220px">
                        <el-option v-for="dict in hm_express" :key="dict.value" :label="dict.label"
                          :value="dict.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="适用人群" prop="eligibility">
                      <el-input v-model="queryParams.eligibility" placeholder="请输入适用人群" clearable disabled
                        style="width: 220px" maxlength="20" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="厂家可用库存" prop="factoryStockNum">
                      <el-input v-model="queryParams.factoryStockNum" placeholder="请输入厂家可用库存" disabled clearable
                        style="width: 220px" maxlength="8" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="不发货地区" prop="noSendArea">
                      <el-input v-model="queryParams.noSendArea" placeholder="请输入不发货地区" clearable disabled
                        style="width: 220px" maxlength="100" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="cooperationMode">
                <div>
                  <div class="hm-form-title">合作信息</div>
                </div>
                <el-row>
                  <!-- <el-col :span="8">
                                        <el-form-item label="招商部" prop="recruiterDeptId">
                                            <el-select v-model="queryParams.recruiterDeptId" placeholder="请选择招商部"
                                                clearable @change="deptChange" style="width: 220px">
                                                <el-option v-for="dict in deptList" :key="dict.deptId"
                                                    :label="dict.deptName" :value="dict.deptId" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="招商员" prop="recruiterId">
                                            <el-select v-model="queryParams.recruiterId" placeholder="请选择招商员" clearable
                                                style="width: 220px">
                                                <el-option v-for="dict in recruiterList" :key="dict.userId"
                                                    :label="dict.userName" :value="dict.userId" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col> -->
                  <el-col :span="8" v-if="queryParams.productCategoryIs">
                    <el-form-item label="是否走仓" prop="warehouse">
                      <el-select v-model="queryParams.warehouse" placeholder="请选择是否走仓" clearable style="width: 220px">
                        <el-option v-for="dict in warehouseList" :key="dict.value" :label="dict.label"
                          :value="dict.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="hm-form-mechanism">
                  <div class="mechanism_title">机制一：</div>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="合作方式" prop="cooperationMode">
                        <el-select v-model="queryParams.cooperationMode" placeholder="请选择合作方式" disabled clearable
                          style="width: 220px" @change="cooperationModeChange($event, 'cooperationMode')">
                          <el-option v-for="dict in hm_cooperation_mode" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="售价" v-if="queryParams.cooperationMode == '分佣'" prop="price">
                        <el-input v-model="queryParams.price" disabled placeholder="请输入售价" clearable
                          style="width: 220px" />
                      </el-form-item>
                      <el-form-item label="售价" v-else>
                        <el-input v-model="queryParams.price" disabled placeholder="请输入售价" clearable
                          style="width: 220px" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="成本价" v-if="queryParams.cooperationMode == '供货'" prop="costPrice">
                        <el-input v-model="queryParams.costPrice" placeholder="请输入成本价" clearable disabled
                          style="width: 220px" />
                      </el-form-item>
                      <el-form-item label="成本价" v-else>
                        <el-input v-model="queryParams.costPrice" placeholder="请输入成本价" clearable disabled
                          style="width: 220px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="佣金" v-if="queryParams.cooperationMode == '分佣'" prop="commission">
                        <el-input v-model="queryParams.commission" disabled placeholder="请输入佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="佣金" v-else>
                        <el-input v-model="queryParams.commission" disabled placeholder="请输入佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="补充佣金" prop="brokerage">
                        <el-input v-model="queryParams.brokerage" disabled placeholder="请输入补充佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="机制" prop="liveStreamingMechanism">
                        <el-input v-model="queryParams.liveStreamingMechanism" disabled placeholder="请输入机制" clearable
                          maxlength="12" style="width: 220px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div class="hm-form-mechanism" v-if="mechanismArr.indexOf(2) !== -1">

                  <div class="mechanism_title">机制二：</div>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="合作方式" prop="cooperationMode1">
                        <el-select v-model="queryParams.cooperationMode1" placeholder="请选择合作方式" clearable
                          style="width: 220px" disabled @change="cooperationModeChange($event, 'cooperationMode1')">
                          <el-option v-for="dict in hm_cooperation_mode" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="售价" v-if="queryParams.cooperationMode1 == '分佣'" prop="price1">
                        <el-input v-model="queryParams.price1" disabled placeholder="请输入售价" clearable
                          style="width: 220px" />
                      </el-form-item>
                      <el-form-item label="售价" v-else>
                        <el-input v-model="queryParams.price1" disabled placeholder="请输入售价" clearable
                          style="width: 220px" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="成本价" v-if="queryParams.cooperationMode1 == '供货'" prop="costPrice1">
                        <el-input v-model="queryParams.costPrice1" placeholder="请输入成本价" disabled clearable
                          style="width: 220px" />
                      </el-form-item>
                      <el-form-item label="成本价" v-else>
                        <el-input v-model="queryParams.costPrice1" placeholder="请输入成本价" disabled clearable
                          style="width: 220px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="佣金" v-if="queryParams.cooperationMode1 == '分佣'" prop="commission1">
                        <el-input v-model="queryParams.commission1" disabled placeholder="请输入佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="佣金" v-else>
                        <el-input v-model="queryParams.commission1" disabled placeholder="请输入佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="补充佣金" prop="brokerage1">
                        <el-input v-model="queryParams.brokerage1" disabled placeholder="请输入补充佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="机制" prop="liveStreamingMechanism1">
                        <el-input v-model="queryParams.liveStreamingMechanism1" disabled placeholder="请输入机制" clearable
                          maxlength="12" style="width: 220px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div class="hm-form-mechanism" v-if="mechanismArr.indexOf(3) !== -1">

                  <div class="mechanism_title">机制三：</div>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="合作方式" prop="cooperationMode2">
                        <el-select v-model="queryParams.cooperationMode2" placeholder="请选择合作方式" clearable
                          style="width: 220px" disabled @change="cooperationModeChange($event, 'cooperationMode2')">
                          <el-option v-for="dict in hm_cooperation_mode" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="售价" v-if="queryParams.cooperationMode2 == '分佣'" prop="price2">
                        <el-input v-model="queryParams.price2" disabled placeholder="请输入售价" clearable
                          style="width: 220px" />
                      </el-form-item>
                      <el-form-item label="售价" v-else>
                        <el-input v-model="queryParams.price2" disabled placeholder="请输入售价" clearable
                          style="width: 220px" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="成本价" v-if="queryParams.cooperationMode2 == '供货'" prop="costPrice2">
                        <el-input v-model="queryParams.costPrice2" placeholder="请输入成本价" disabled clearable
                          style="width: 220px" />
                      </el-form-item>
                      <el-form-item label="成本价" v-else>
                        <el-input v-model="queryParams.costPrice2" placeholder="请输入成本价" disabled clearable
                          style="width: 220px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="佣金" v-if="queryParams.cooperationMode2 == '分佣'" prop="commission2">
                        <el-input v-model="queryParams.commission2" disabled placeholder="请输入佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="佣金" v-else>
                        <el-input v-model="queryParams.commission2" disabled placeholder="请输入佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="补充佣金" prop="brokerage2">
                        <el-input v-model="queryParams.brokerage2" disabled placeholder="请输入补充佣金" clearable
                          style="width: 220px">
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="机制" prop="liveStreamingMechanism2">
                        <el-input v-model="queryParams.liveStreamingMechanism2" disabled placeholder="请输入机制" clearable
                          maxlength="12" style="width: 220px" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>

              </div>

            </el-form>
          </div>
          <!-- 商家信息 -->
          <div class="business">
            <div class="hm-form-title">商家信息</div>
            <el-row>
              <el-col :span="24">

                <div class="hm-form-mechanism">
                  <div class="mechanism_flex">
                    <div class="mechanism_div">
                      <div class="title">商家名：</div>{{
                        commoditydetailsData.supplierVo?.supplierName
                      }}
                    </div>
                    <div class="mechanism_div">
                      <div class="title">联系人：</div>{{ commoditydetailsData.supplierVo?.contactName
                      }}
                    </div>
                    <div class="mechanism_div">
                      <div class="title">联系方式：</div>{{ commoditydetailsData.supplierVo?.phone }}
                    </div>
                    <div class="mechanism_div">
                      <div class="title">供销合同：</div><a style="color: #0094FF"
                        @click="previewContract(commoditydetailsData.supplierVo?.contractList || [], '供销合同')">
                        {{
                          getContract(commoditydetailsData.supplierVo?.contractList || [], '供销合同')
                        }}
                      </a>
                    </div>
                    <div class="mechanism_div">
                      <div class="title">破价合同：</div> <a style="color: #0094FF"
                        @click="previewContract(commoditydetailsData.supplierVo?.contractList || [], '破价合同')">
                        {{
                          getContract(commoditydetailsData.supplierVo?.contractList || [], '破价合同')
                        }}
                      </a>
                    </div>
                    <div class="mechanism_div">
                      <div class="title">保证金协议：</div><a style="color: #0094FF"
                        @click="previewContract(commoditydetailsData.supplierVo?.contractList || [], '保证金协议')">
                        {{
                          getContract(commoditydetailsData.supplierVo?.contractList || [],
                            '保证金协议')
                        }}
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="record" v-if="!editFlag">
            <div class="hm-form-title">库存记录</div>
            <el-tabs v-model="activeTab" @tab-click="handleClick">
              <el-tab-pane label="入库记录" name="inventory">
                <el-table v-loading="inventoryLoading" :data="inventoryData">
                  <el-table-column label="序号" type="index" width="55" align="center" />
                  <el-table-column label="入库部门" prop="putSourceName" align="center" />
                  <el-table-column label="动作类型" prop="putType" align="center" />
                  <el-table-column label="入库时间" prop="finishTime" align="center" />
                  <el-table-column label="入库数量" prop="quantity" align="center" />
                  <el-table-column label="操作员" prop="putUserName" align="center" />
                  <el-table-column label="操作流水号" prop="orderId" align="center" />
                  <el-table-column label="剩余库存" prop="stockCount" align="center" />
                </el-table>
                <pagination v-show="inventoryTotal > 0" :total="inventoryTotal"
                  v-model:page="inventoryQueryParams.pageNum" v-model:limit="inventoryQueryParams.pageSize"
                  @pagination="getInventoryList" />
              </el-tab-pane>
              <el-tab-pane label="出库记录" name="sales">
                <el-table v-loading="salesLoading" :data="salesData">
                  <el-table-column label="序号" type="index" width="55" align="center" />
                  <el-table-column label="出库部门" prop="coreName" align="center" />
                  <el-table-column label="动作类型" prop="outTypeName" align="center" />
                  <el-table-column label="出库时间" prop="createTime" align="center" />
                  <el-table-column label="出库数量" prop="outNum" align="center" />
                  <el-table-column label="操作员" prop="outUserName" align="center" />
                  <el-table-column label="操作流水号" prop="outId" align="center" />
                  <el-table-column label="剩余库存" prop="stockCount" align="center" />
                </el-table>
                <pagination v-show="salesTotal > 0" :total="salesTotal" v-model:page="salesQueryParams.pageNum"
                  v-model:limit="salesQueryParams.pageSize" @pagination="getSalesList" />
              </el-tab-pane>
            </el-tabs>
          </div>

        </div>
        <el-button class="button_positions" type="primary" @click="edit('edit')" v-if="!editFlag"
          v-hasPermi="['hm:product:updates']">编辑</el-button>
        <el-button :loading="loading" class="button_position" type="primary" @click="handleSave(queryRef)"
          v-if="editFlag">
          保存
        </el-button>
        <el-button class="button_positions" @click="edit('cancel')" v-if="editFlag">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script setup name="ProductLibraryDetails" lang="ts">
import jsonData from '@/views/group/contract/compoments/address.json';
import { Plus } from '@element-plus/icons-vue';
import { getStorageRecordByTime, selectOutStockAppListByTime } from '@/api/group/productOutbound/index';
import { getUserList, loginDeptList } from '@/api/group/qualityControl';
import { categoryList, hmProductsEdit } from '@/api/system/supplierAddProducts';
import { validateStyleCode, validatePrice, validatorStyleCode, validateIntegerMax, inventoryCoding } from '@/utils/validate';
import { removeInvalidNodes } from '@/utils/index';
import type { TabsPaneContext } from 'element-plus';
import icon_shanchu from '@/assets/images/icon_shanchu.png';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_trade_type } = toRefs<any>(proxy?.useDict('hm_trade_type'));
const { hm_cooperation_mode } = toRefs<any>(proxy?.useDict('hm_cooperation_mode'));
const { hm_express } = toRefs<any>(proxy?.useDict('hm_express'));
import type { FormInstance } from 'element-plus';
const options = jsonData;
const addressProps = {
  label: 'value',
  value: 'value'
};
const loading = ref(false);

// 集合
const mechanismArr = ref([1]);
const queryParams: any = ref();
const categoryRef = ref();
const queryRef = ref<ElFormInstance>();
const warehouseList = ref([
  { label: '是', value: 1 },
  { label: '否', value: 0 }
]);
const rules = ref({
  categoryId: [{ required: true, message: '请选择类目', trigger: 'change' }],
  styleCode: [{ validator: validatorStyleCode, trigger: 'change' }],
  // groupName: [{ required: true, message: '请输入对接群名', trigger: 'blur' }],
  warehouse: [{ required: true, message: '请选择是否走仓', trigger: 'change' }],
  factoryStockNum: [{ required: false, message: '请输入厂家可用库存', trigger: 'blur' }, { validator: validateIntegerMax }],
  stockCode: [{ required: true, message: '请输入库存编码', trigger: 'blur' }, { validator: inventoryCoding }]
});
const deptList = ref<{ deptId: string; deptName: string }[]>([]);
const recruiterList = ref<{ userId: string; userName: string }[]>([]);

const props = defineProps({
  commoditydetailsData: {
    type: Object,
    default: ''
  },
  dialogInfoVisible: {
    type: Boolean,
    default: false
  }
});
watch(
  () => props.dialogInfoVisible,
  (val) => {
    if (val) {
      getInventoryList();
    }
  }
);
// 类目数据
const categoryProps = ref([]);
const navList = ref([{ name: '基本信息' }, { name: '直播补充信息' }, { name: '合作信息' }, { name: '商家信息' }, { name: '库存记录' }]);
const navLists = ref([{ name: '基本信息' }, { name: '直播补充信息' }, { name: '合作信息' }, { name: '商家信息' }]);

const navIndex = ref(0);
const editFlag = ref(false);
// tab
const activeTab = ref('inventory');
// 库存记录
const inventoryData = ref<any[]>([]);
const inventoryLoading = ref(false);
const inventoryTotal = ref(0);
const inventoryQueryParams = ref({
  pageNum: 1,
  pageSize: 10
});
// 售卖记录
const salesData = ref([]);
const salesLoading = ref(false);
const salesTotal = ref(0);
const salesQueryParams = ref({
  pageNum: 1,
  pageSize: 10
});

const navClickFlag = ref(false);

/**
 * tabs切换
 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.paneName == 'inventory') {
    getInventoryList();
  } else {
    getSalesList();
  }
};
/** 监听滚动事件 */
const handleScroll = (event: any) => {
  // if (!navClickFlag.value) {
  //     const scrollTop = event.target.scrollTop
  //     const info: any = document.querySelector(".info")
  //     const liveShot: any = document.querySelector(".liveShot")
  //     const cooperationMode: any = document.querySelector(".cooperationMode")
  //     const business: any = document.querySelector(".business")
  //     // 可滑动最大值 2px误差
  //     const maxScrollTop = event.target.scrollHeight - event.target.clientHeight;
  //     if (scrollTop === 0) {
  //         navIndex.value = 0
  //         return
  //     }
  //     if (scrollTop === maxScrollTop) {
  //         navIndex.value = 3
  //         return
  //     }
  //     if (scrollTop == 0 || scrollTop < info.offsetHeight) {
  //         navIndex.value = 0
  //     } else if (scrollTop > (info.offsetHeight + (liveShot?.offsetHeight || 0) + 15) && scrollTop < (info.offsetHeight + (liveShot?.offsetHeight || 0) + 15 + cooperationMode.offsetHeight)) {
  //         navIndex.value = 1
  //     } else if (scrollTop > (info.offsetHeight + (liveShot?.offsetHeight || 0) + 15 + cooperationMode.offsetHeight) || scrollTop >= maxScrollTop) {
  //         navIndex.value = 2
  //     }
  // }
};
/** nav点击 */
const navClick = (index: number) => {
  if (index === 0) {
    const info: any = document.querySelector('.info');
    info.scrollIntoView({ behavior: 'smooth' });
  } else if (index === 1) {
    const info: any = document.querySelector('.supplementaryInfo');
    info.scrollIntoView({ behavior: 'smooth' });
  } else if (index === 2) {
    const cooperationMode: any = document.querySelector('.cooperationMode');
    cooperationMode.scrollIntoView({ behavior: 'smooth' });
  } else if (index === 3) {
    const business: any = document.querySelector('.business');
    business.scrollIntoView({ behavior: 'smooth' });
  } else {
    const record: any = document.querySelector('.record');
    record.scrollIntoView({ behavior: 'smooth' });
  }
  navIndex.value = index;
  // if (navIndex.value !== index) {
  //     navClickFlag.value = true
  //     navIndex.value = index
  //     const scrollDom: any = document.querySelector(".content_div")
  //     const info: any = document.querySelector(".info")
  //     const cooperationMode: any = document.querySelector(".cooperationMode")
  //     // 可滑动最大值 2px误差
  //     const maxScrollTop = scrollDom.scrollHeight - scrollDom.clientHeight - 2;
  //     // 获取基本信息高度
  //     const infoOffsetHeight = info.offsetHeight
  //     // 获取合作信息高度
  //     const cooperationModeOffsetHeight = cooperationMode.offsetHeight
  //     if (index == 0 && scrollDom.scrollTop > 0) {
  //         const timeTop = setInterval(() => {
  //             scrollDom.scrollTop = scrollDom.scrollTop -= 10;
  //             if (scrollDom.scrollTop <= 0) {
  //                 clearInterval(timeTop);
  //                 navClickFlag.value = false
  //             }
  //         }, 1);
  //     } else if (index == 1) {
  //         var heightOne = infoOffsetHeight
  //         if (scrollDom.scrollTop > heightOne) {
  //             const timeTop = setInterval(() => {
  //                 scrollDom.scrollTop = scrollDom.scrollTop -= 10;
  //                 if (scrollDom.scrollTop <= heightOne) {
  //                     clearInterval(timeTop);
  //                     navClickFlag.value = false
  //                 }
  //             }, 1);
  //         } else {
  //             const timeTop = setInterval(() => {
  //                 scrollDom.scrollTop = scrollDom.scrollTop += 10;
  //                 if (scrollDom.scrollTop >= heightOne) {
  //                     clearInterval(timeTop);
  //                     navClickFlag.value = false
  //                 }
  //             }, 1);
  //         }
  //     } else if (index == 2) {
  //         var heightTwo = Math.min(cooperationModeOffsetHeight / 2 + 150, maxScrollTop)
  //         if (scrollDom.scrollTop > heightTwo) {
  //             const timeTop = setInterval(() => {
  //                 scrollDom.scrollTop = scrollDom.scrollTop -= 10;
  //                 if (scrollDom.scrollTop <= heightTwo) {
  //                     clearInterval(timeTop);
  //                     navClickFlag.value = false
  //                 }
  //             }, 1);
  //         } else {
  //             const timeTop = setInterval(() => {
  //                 scrollDom.scrollTop = scrollDom.scrollTop += 10;
  //                 if (scrollDom.scrollTop >= heightTwo) {
  //                     clearInterval(timeTop);
  //                     navClickFlag.value = false
  //                 }
  //             }, 1);
  //         }
  //     } else if (index == 3) {
  //         const timeTop = setInterval(() => {
  //             scrollDom.scrollTop = scrollDom.scrollTop += 10;
  //             if (scrollDom.scrollTop >= maxScrollTop) {
  //                 clearInterval(timeTop);
  //                 navClickFlag.value = false
  //             }
  //         }, 1);
  //     }
  // }
};

/** 入库记录 */
const getInventoryList = async () => {
  inventoryLoading.value = true;
  const res = await getStorageRecordByTime({ ...inventoryQueryParams.value, productsId: props.commoditydetailsData.id });
  inventoryData.value = res.rows;
  inventoryTotal.value = res.total;
  inventoryLoading.value = false;
};
/** 出库记录 */
const getSalesList = async () => {
  salesLoading.value = true;
  const res = await selectOutStockAppListByTime({ ...salesQueryParams.value, productsId: props.commoditydetailsData.id });
  salesData.value = res.rows;
  salesTotal.value = res.total;
  salesLoading.value = false;
};
/** 编辑 */
const edit = async (type: string) => {
  editFlag.value = !editFlag.value;
  if (type == 'edit') {
    queryParams.value = props.commoditydetailsData;
    queryParams.value.placeDelivery = queryParams.value.placeDelivery ? (queryParams.value.placeDelivery as string).split('-') : [];
    queryParams.value.categoryId = queryParams.value.categoryId ? queryParams.value.categoryId.split(',') : [];
    queryParams.value.cooperationMode = queryParams.value.mechanismList[0].cooperationMode;
    queryParams.value.commission = queryParams.value.mechanismList[0].commission;
    queryParams.value.price = queryParams.value.mechanismList[0].price;
    queryParams.value.costPrice = queryParams.value.mechanismList[0].costPrice;
    queryParams.value.brokerage = queryParams.value.mechanismList[0].brokerage;
    queryParams.value.liveStreamingMechanism = queryParams.value.mechanismList[0].liveStreamingMechanism;

    queryParams.value.cooperationMode1 = queryParams.value.mechanismList[1].cooperationMode;
    queryParams.value.commission1 = queryParams.value.mechanismList[1].commission;
    queryParams.value.price1 = queryParams.value.mechanismList[1].price;
    queryParams.value.costPrice1 = queryParams.value.mechanismList[1].costPrice;
    queryParams.value.brokerage1 = queryParams.value.mechanismList[1].brokerage;
    queryParams.value.liveStreamingMechanism1 = queryParams.value.mechanismList[1].liveStreamingMechanism;

    queryParams.value.cooperationMode2 = queryParams.value.mechanismList[2].cooperationMode;
    queryParams.value.commission2 = queryParams.value.mechanismList[2].commission;
    queryParams.value.price2 = queryParams.value.mechanismList[2].price;
    queryParams.value.costPrice2 = queryParams.value.mechanismList[2].costPrice;
    queryParams.value.brokerage2 = queryParams.value.mechanismList[2].brokerage;
    queryParams.value.liveStreamingMechanism2 = queryParams.value.mechanismList[2].liveStreamingMechanism;

    let arr: Array<number> = [];
    queryParams.value.mechanismList.forEach((item: any, index: number) => {
      if (item.cooperationMode) {
        arr.push(index + 1);
      }
    });
    mechanismArr.value = arr;
  }
};
/** 补充机制 */
const addMechanism = (index: number) => {
  mechanismArr.value.push(index);
};
/** 删除机制 */
const handleDelete = (index: number) => {
  // 当机制二删除并且机制三也存在得情况 删除机制三 保留机制二
  if (index == 2 && mechanismArr.value.length == 3) {
    mechanismArr.value.splice(2, 1);
    queryParams.value.cooperationMode1 = queryParams.value.cooperationMode2;
    queryParams.value.price1 = queryParams.value.price2;
    queryParams.value.costPrice1 = queryParams.value.costPrice2;
    queryParams.value.liveStreamingMechanism1 = queryParams.value.liveStreamingMechanism2;
    queryParams.value.commission1 = queryParams.value.commission2;
    queryParams.value.brokerage1 = queryParams.value.brokerage2;

    queryParams.value.cooperationMode2 = '';
    queryParams.value.price2 = '';
    queryParams.value.costPrice2 = '';
    queryParams.value.liveStreamingMechanism2 = '';
    queryParams.value.commission2 = '';
    queryParams.value.brokerage2 = '';
  } else {
    let indexs = mechanismArr.value.indexOf(index);
    mechanismArr.value.splice(indexs, 1);
    if (index == 2) {
      queryParams.value.cooperationMode1 = '';
      queryParams.value.price1 = '';
      queryParams.value.costPrice1 = '';
      queryParams.value.liveStreamingMechanism1 = '';
      queryParams.value.commission1 = '';
      queryParams.value.brokerage1 = '';
    } else if (index == 3) {
      queryParams.value.cooperationMode2 = '';
      queryParams.value.price2 = '';
      queryParams.value.costPrice2 = '';
      queryParams.value.liveStreamingMechanism2 = '';
      queryParams.value.commission2 = '';
      queryParams.value.brokerage2 = '';
    }
  }
};
/** 保存 */
const handleSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      loading.value = true;
      const formCopy = JSON.parse(JSON.stringify(queryParams.value));
      formCopy.placeDelivery = formCopy.placeDelivery ? (formCopy.placeDelivery as string[]).join('-') : '';
      const hmMechanismsList: any = [
        {
          cooperationMode: queryParams.value.cooperationMode,
          commission: queryParams.value.commission,
          price: queryParams.value.price,
          costPrice: queryParams.value.costPrice,
          brokerage: queryParams.value.brokerage,
          liveStreamingMechanism: queryParams.value.liveStreamingMechanism
        },
        {
          cooperationMode: queryParams.value.cooperationMode1,
          commission: queryParams.value.commission1,
          price: queryParams.value.price1,
          costPrice: queryParams.value.costPrice1,
          brokerage: queryParams.value.brokerage1,
          liveStreamingMechanism: queryParams.value.liveStreamingMechanism1
        },
        {
          cooperationMode: queryParams.value.cooperationMode2,
          commission: queryParams.value.commission2,
          price: queryParams.value.price2,
          costPrice: queryParams.value.costPrice2,
          brokerage: queryParams.value.brokerage2,
          liveStreamingMechanism: queryParams.value.liveStreamingMechanism2
        }
      ];
      const params = {
        ...formCopy,
        categoryId: queryParams.value.categoryId ? queryParams.value.categoryId.join(',') : '',
        hmMechanismsList: hmMechanismsList
      };
      try {
        const res = await hmProductsEdit(params);
        proxy?.$modal.msgSuccess('保存成功');
        editFlag.value = false;
        formEl.resetFields();
        emits('handleInfo', { id: queryParams.value.id });
        loading.value = false;
      } catch (err) {
        loading.value = false;
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose', 'handleInfo']);
const handleClose = () => {
  editFlag.value = false;
  activeTab.value = 'inventory';
  emits('doClose');
};

// 类目请求方法
const getCategoryList = async () => {
  const { data = [] } = await categoryList({});
  categoryProps.value = removeInvalidNodes(data, 'categoryStatus');
};

// 筛选类目change事件
const handleChange = (val: any) => {
  if (val && val.length) {
    let nameArr: Array<string> = [];
    val.forEach((item: string | number) => {
      let data = findNodeById(categoryProps.value, item, 'categoryId');
      if (data) {
        nameArr.push(data.categoryName);
      }
    });
    queryParams.value.productCategoryName = nameArr.join(',');
    if (queryParams.value.productCategoryName?.indexOf('饰品') < 0) {
      queryParams.value.productCategoryIs = false;
      queryParams.value.warehouse = '';
    } else {
      queryParams.value.productCategoryIs = true;
    }
  } else {
    queryParams.value.productCategoryName = '';
    queryParams.value.productCategoryIs = false;
    queryParams.value.warehouse = '';
  }
};

const findNodeById: any = (tree: Array<any>, targetId: string | number, key: string) => {
  for (let node of tree) {
    if (node[key] === targetId) {
      return node; // 找到目标节点
    }

    if (node.children && node.children.length > 0) {
      const found = findNodeById(node.children, targetId);
      if (found) {
        return found; // 在子树中找到目标节点
      }
    }
  }

  return null; // 没有找到目标节点
};
/**
 * 获取招商部门信息
 */
const getDeptLists = async () => {
  const res = await loginDeptList();
  deptList.value = res.data;
};
/**
 *  根据招商部获取招商员
 */
const deptChange = async (event: string) => {
  if (event) {
    const res = await getUserList({ deptId: event });
    recruiterList.value = res.rows;
    queryParams.value.recruiterId = undefined;
  } else {
    recruiterList.value = [];
    queryParams.value.recruiterId = undefined;
  }
};
// 合同反显
const getContract = (arr: any, type: string) => {
  const data = arr.find((item: any) => {
    return item.contractType == type;
  });
  return data?.fileName || '';
};
// 预览合同
const previewContract = async (arr: any, type: string) => {
  const data = arr.find((item: any) => {
    return item.contractType == type;
  });
  window.open(import.meta.env.VITE_APP_PIC_URL + data?.contractFile, '_blank');
};
// 合作方式选择
const cooperationModeChange = (e: string, key: string) => {
  if (e == '供货') {
    if (key == 'cooperationMode') {
      queryParams.value.price = '';
      queryParams.value.commission = '';
      queryParams.value.brokerage = '';
    } else if (key == 'cooperationMode1') {
      queryParams.value.price1 = '';
      queryParams.value.commission1 = '';
      queryParams.value.brokerage1 = '';
    } else {
      queryParams.value.price2 = '';
      queryParams.value.commission2 = '';
      queryParams.value.brokerage2 = '';
    }
  }
};
onMounted(() => {
  // getInventoryList()
  getDeptLists();
  getCategoryList();
});
</script>
<style lang="scss" scoped>
.flex_div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.hm-drawer {
  .add_mechanism_div {
    width: 100%;
    display: flex;
    justify-content: center;

    .add_mechanism {
      width: 275px;
      height: 38px;
      font-size: 16px;
    }
  }

  .div_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--bTextColor);
    min-height: 100%;

    .div_flex_items {
      width: 50%;
      display: flex;
      align-items: center;
      min-height: 13%;
    }

    .div_flex_item {
      width: 100%;
      display: flex;
      align-items: flex-start;
    }

    .label {
      width: 100px;
    }

    .value {
      width: calc(100% - 100px);
      word-break: break-all;
    }
  }

  .hm-box-title {
    font-weight: 600;
    font-size: 21px;
    color: var(--bTextColor);
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f7;
  }

  .hm-form-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--bTextColor);
    margin: 5px 0;
    margin-bottom: 20px;
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .content_nav {
      width: 142px;
      height: 184px;

      .nav_class {
        width: 100%;
        height: 46px;
        text-align: center;
        border-bottom: 1px solid #f3f3f7;
        border-right: 1px solid #f3f3f7;
        font-size: 16px;
        color: var(--bTextColor);
        line-height: 46px;
        cursor: pointer;
      }

      .nav_hover {
        width: 100%;
        height: 46px;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        background: #0094ff;
        line-height: 46px;
      }
    }

    .content_div {
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding-left: 10px;

      .liveShot {
        margin-top: 15px;
        display: flex;
        min-height: 30px;

        .liveShot_text {}

        .liveShot_img {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-wrap: wrap;

          .liveShot_img_item {
            width: 318px;
            height: 260px;
            padding: 5px;

            .img {
              width: 100%;
              height: 100%;
              border: 1px solid #000;
            }
          }
        }

        .liveShot_context {
          flex: 1;
          min-width: 0;
          padding-right: 10px;
          word-break: break-all;
        }
      }

      .content_div_cooperationMode {
        :deep(.el-descriptions) {
          height: auto !important;
        }
      }

      .hm-form-mechanism {
        position: relative;

        .mechanism_title {
          font-weight: 500;
          font-size: 14px;
          color: var(--bTextColor);
          margin-bottom: 15px;
        }

        .mechanism_flex {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;

          .mechanism_div {
            margin-bottom: 15px;
            width: calc(100% / 3);
            display: flex;
            align-items: center;
            color: var(--bTextColor);
            font-size: 14px;

            .title {
              font-size: 14px;
              color: var(--bTextColor);
              width: 100px;
            }

            a {
              width: calc(100% - 100px);
            }

            .value {
              width: calc(100% - 100px);
            }
          }
        }

        .delete_mechanism {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 10px;
          top: 50%;
          cursor: pointer;
          z-index: 50;
        }
      }
    }

    .content_edit {
      width: 92px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #0094ff;
      cursor: pointer;
      text-align: center;
      font-weight: 400;
      font-size: 16px;
      color: #0094ff;
      line-height: 38px;
      position: fixed;
      top: 100px;
      right: 20px;
    }

    .button_position {
      position: fixed;
      top: 100px;
      right: 90px;
    }

    .button_positions {
      position: fixed;
      top: 100px;
      right: 20px;
    }
  }
}

:deep(.el-drawer__body) {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
}

:deep(.el-descriptions) {
  height: 100%;
}

:deep(.el-descriptions__body) {
  height: 100%;
}

:deep(.el-descriptions__table) {
  height: 100%;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 0px !important;
}

:deep(.el-tabs__item) {
  color: #b8beca;
}
</style>